<template>
  <div class="competition-set">
    <el-page-header @back="router.back()">
      <template #title>
        <span>
          返回列表
        </span>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3">
          {{route.query.raceName}}
        </span>
      </template>
    </el-page-header>

    <el-tabs v-model="activeName" class="mt15" type="border-card">
      <el-tab-pane label="球队审核" name="first">
        <TeamReview />
      </el-tab-pane>
      <el-tab-pane label="赛程管理" name="second">
        <CourseManage />
      </el-tab-pane>
      <el-tab-pane label="名单打印" name="third">
        <ListPrinting />
      </el-tab-pane>
      <el-tab-pane label="比赛数据" name="four">
        <GameData />
      </el-tab-pane>
      <el-tab-pane label="数据统计" name="five">
        <DataStatistic />
      </el-tab-pane>
      <el-tab-pane label="比赛视频" name="six">
        <gameVideo />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import TeamReview from "./component/teamReview.vue";
import CourseManage from "./component/courseManage.vue";
import ListPrinting from "./component/listPrinting.vue";
import GameData from "./component/gameData.vue";
import DataStatistic from "./component/dataStatistic/index.vue";
import gameVideo from "./component/gameVideo.vue";
import router from '@/router';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeName = ref('first')

</script>

<style lang="scss" scoped>
.competition-set {
  padding: 20px;
  background: #fff;
  height: calc(100vh - 60px - 30px);
}
</style>